// Big-picture page layout.

html {
  height: 100%;

  // The viewport width changes slightly if there's a scrollbar or now,
  // causing the layout to shift when navigating between long and short
  // pages. There are a few ways to try to deal with this, but here I
  // just force there to always be a scrollbar.
  overflow-y: scroll;
}

body {
  margin: 0;
  height: 100%;
}


// High-level sidebar layout (detailed contents in _chrome.scss)

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: $sidebar-width;
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  .sidebar-scrollbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 10px;

    overflow-y: auto;
  }
}

.sidebar-visible .page-wrapper {
    transform: translateX($sidebar-width);
}

@media only screen and (min-width: 620px) {
    .sidebar-visible .page-wrapper {
        transform: none;
        margin-left: $sidebar-width;
    }
}

.sidebar-hidden .sidebar {
    transform: translateX(-$sidebar-width);
}

// Page wrapper

.page-wrapper {
  box-sizing: border-box;
}

.page {
  outline: 0;
  padding: 0 $page-padding;
  margin-top: -$menu-bar-height;
}


// Menu bar

#menu-bar,
#menu-bar-hover-placeholder {
  z-index: 101;
  margin: auto $neg-page-padding;
}

#menu-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}


// The main content area

.content {
  overflow-y: auto;
  padding: 0 15px;

  main {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-content-width;
  }
}
